<template>
  <n-empty description="攻略库-建设中" class="--empty-ptb-40">
    <template #icon>
      <n-icon :size="40" color="#909399">
        <IconTutorial />
      </n-icon>
      <!-- <aPlayer/>  -->
    </template>
  </n-empty>
  <el-row>
   <template v-for="(fc, fn) in strategyList" :key="fn">
       <el-col :span="6">
     <el-card class="data-item interval str-ma" shadow="hover" @click="clickStrateg(fc)">
       <div class="card-header">
         <span  v-if="fc.buildState === 1 " class="font-st wg">{{ fc.strategyName}}</span>
         <span  v-else class="font-st">{{ fc.strategyName}}</span>
       </div>
   </el-card>
   </el-col>
     </template>
 </el-row>
</template>

<script lang='ts'>
import { defineComponent, onMounted,reactive,toRefs } from 'vue'
import { useRouter,useRoute} from 'vue-router'
import { useMessage } from 'naive-ui'
import { IconTutorial } from '@/icons'
import { strategy,saveClPvUv } from '@/api/user'
// import aPlayer from '@/pages/components/APlayer.vue'
import { encrypt,decrypt } from '@/utils/util'

export default defineComponent({
  name: 'MyCase',
  components: {
    IconTutorial,
    // aPlayer
  },
  setup() {
    const nMessage = useMessage()

    const state = reactive({
      strategyList: [],
      
      
    })

    onMounted(() => {
      nMessage.warning('建设中。。。')
      getStrategyList();
    })
 // 获取轮播图列表
 const getStrategyList = () => {
      strategy(null).then(res=>{ 
           const data = res.data.data;  
           state.strategyList = data;
          // console.log(data)
      })
    }
  
  const router = useRouter()
  // 点击攻略库id跳转
  const clickStrateg = (strategy) => {
    if(strategy.buildState == 2){
      nMessage.warning('【'+strategy.strategyName+'】建设中。。。')
      return;
    }
    let id = strategy.id;
    if(id == 1){
      nMessage.success('包子提醒您，请点击【人物图鉴】右上角五系图标进入')
    }else if(id == 2){
      router.push({name: 'equipmentLbrary' })
    }else if(id == 3 || id == 4 || id == 5 || id == 6 || id == 7 || id == 10){
      const param = encrypt((strategy))
      router.push({
          name: 'StrategyScreen',
            query: {
              param: param
            },
          })
    }else if(id == 8){
      router.push({name: 'CardPoolScreen'})
    }else if(id == 9){
      router.push({name: 'DataMapScreen'})
    }
    savePvUv(id);
  }   

    // 记录pvuv
  const savePvUv = (id) => {
        const url = "https://www.cljj.wiki/index.html#/case?id="+id;
        saveClPvUv(url).then();
  }

  return {
      ...toRefs(state),
      clickStrateg
    }
  },
})
</script>
<style lang='scss' scoped>
  .font-st{
    font-size: 1vw;
    font-weight: 700;
  }
  

  .str-ma{
    margin: 2vw;
    text-align: center;
   
  }
 
  .wg {
    font-size: 1vw;
    // line-height: 50px;
    background-image: -webkit-linear-gradient(left, #e30f0f, #E6D205 25%, #f08080 50%, #E6D205 75%, #f08080);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
    // font-family:楷体;
    // font-weight: 700
}
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

</style>
